<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'
import type { ChannelItem, ResData } from '../../../types/data'

// 定义响应变量
const list = ref<ChannelItem[]>()

// 获取频道数据
const getChannels = async () => {
  const res = await axios.get<ResData>('http://geek.itheima.net/v1_0/channels')
  // console.log(res)
  list.value = res.data.data.channels
  // console.log(list)
}

onMounted(() => {
  getChannels()
})

// 接收选中频道ID
defineProps<{seledId:number}>()

// 子传父修改选中频道ID
const emit=defineEmits<{
  (e:'change-seled',data:number):void
}>()


</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <!-- <a class="item" :class="{ active: i === 0 }" href="javascript:;" v-for="(item, i) in 10" :key="i">
        推荐{{ item }}
      </a> -->
      <a class="item" 
        :class="{ active: seledId === item.id }" 
        href="javascript:;" v-for="item in list" 
        :key="item.id"
        @click="emit('change-seled',item.id)"
        >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>